<template>
    <page-header-wrapper :title="false">
      <a-card title="业绩">
        <div slot="extra">
          <a-button-group>
            <a-button type="primary" @click="resetColumn"> 重置自定义列 </a-button>
            <a-button type="primary" @click="addColumn"> 自定义列 </a-button>
          </a-button-group>
          <!--<a-dropdown v-model="visible" :trigger="['click']">-->
            <!--<a-checkbox-group v-model="checkedList" slot="overlay" @change="onChange">-->
              <!--<a-menu>-->
                <!--<a-menu-item v-for="item in otherColumns" :key="item.key">-->
                  <!--<a-checkbox :value="item.dataIndex">{{item.title}}</a-checkbox>-->
                <!--</a-menu-item>-->
              <!--</a-menu>-->
            <!--</a-checkbox-group>-->
            <!--<a-button> 选择列数 <a-icon type="down" /> </a-button>-->
          <!--</a-dropdown>-->
        </div>
        <a-table
          :columns="currentColumns"
          :data-source="data"
          :scroll="{ x: 1500 }"
          bordered
        >
          <div slot="action">
            <a-button type="primary">详情</a-button>
          </div>
        </a-table>
      </a-card>
      <a-modal
        v-model="visible"
        title="选择自定表列"
        :width="600"
        :footer="null"
        @cancel="handleCancel"
      >
        <a-checkbox-group v-model="checkedList" @change="onChange">
          <a-row :gutter="[20,20]">
            <a-col :span="6" v-for="item in otherColumns" :key="item.key">
              <a-checkbox :value="item.dataIndex">
                {{item.title}}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="handleAddColumns">确定</a-button>
          </a-col>
        </a-row>
      </a-modal>
    </page-header-wrapper>
</template>

<script>
  const columns = [
    {
      key: 'key',
      title: '序号',
      dataIndex: 'key'
    },
    {
      key: 'name',
      title: '姓名',
      dataIndex: 'name'
    },
    {
      key: 'status',
      title: '状态',
      dataIndex: 'status'
    },
    {
      key: 'entry_time',
      title: '入职时间',
      dataIndex: 'entry_time'
    }
  ]
  const otherColumns = [
    {
      key: 'current_performance',
      title: '当月业绩',
      dataIndex: 'current_performance'
    },
    {
      key: 'current_lx',
      title: '当月领新',
      dataIndex: 'current_lx'
    },
    {
      key: 'current_ts',
      title: '当月通时',
      dataIndex: 'current_ts'
    },
    {
      key: 'deal_contract',
      title: '当月合同',
      dataIndex: 'deal_contract'
    },
    {
      key: 'wechat_sum',
      title: '微信总数',
      dataIndex: 'wechat_sum'
    },
    {
      key: 'wechat_num',
      title: '平均微信数',
      dataIndex: 'wechat_num'
    },
    {
      key: 'high_yj',
      title: '历史最高业绩',
      dataIndex: 'high_yj'
    },
    {
      key: 'danjia',
      title: '当月客单价',
      dataIndex: 'danjia'
    },
    {
      key: 'zhuanhua',
      title: '当月转化率',
      dataIndex: 'zhuanhua'
    },
    {
      key: 'jiazhi',
      title: '通时价值',
      dataIndex: 'jiazhi'
    },
    {
      key: 'action',
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name: 'PerformanceIndex',
    data () {
      return {
        columns,
        currentColumns: [],
        data: [],
        otherColumns,
        diyColumns: [],
        checkedList: [],
        visible: false,
        loading: true
      }
    },
    created () {
      this.currentColumns = this.columns
    },
    methods: {
      addColumn () {
        this.visible = true
      },
      onChange (event) {
        const app = this
        const othCol = app.otherColumns
        const diyColumns = []
        // const diyColumns = []
        for (const k in event) {
          for (const l in othCol) {
            if (event[k] === othCol[l].dataIndex) {
              diyColumns.push(othCol[l])
            }
          }
        }
        app.diyColumns = diyColumns
      },
      handleCancel () {
        this.checkedList = []
      },
      handleAddColumns () {
        const app = this
        app.visible = false
        app.currentColumns = app.columns.concat(app.diyColumns)
      },
      resetColumn () {
        this.checkedList = []
        this.currentColumns = this.columns
      }
    }
  }
</script>

<style scoped>
  .column-settings{
    background:#fff;
    padding: 10px 20px;
  }
</style>
